import { useState, useEffect } from "react";
import { Form, Select, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { uniquecodesMarkExc } from "../service";

const ProductAbnormalModal = ({ visible, query, checkedRows, checkedIds, fetchList, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [uniqueCodeNum, setUniqueCodeNum] = useState(false); //去支付弹窗

	useEffect(() => {
		let evenNumbers = checkedRows.filter(function (item) {
			return item.code !== "";
		});
		setUniqueCodeNum(evenNumbers.length);
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await uniquecodesMarkExc({
				codeList: checkedIds,
				excType: [0]
			});
			if (success) {
				message.success("操作成功");
				onCancel();
				fetchList();
			}
			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal title={{ title: "标记异常" }} visible={true} onOk={onOk} width="333px" onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<div>
					共包含唯一码数：<span style={{ color: "rgba(240, 61, 41, 1)" }}>{uniqueCodeNum}</span>
				</div>
				<div>确定批量标记异常标签吗？</div>
			</Form>
		</CommonModal>
	);
};

export default ProductAbnormalModal;
